<template>
  <div class="w-full min-h-screen bg-gradient-to-b from-pink-50 to-red-50 relative">
    <!-- 顶部导航 -->
    <div class="flex justify-center items-center py-4">
      <div class="flex space-x-8">
        <div class="text-red-500 border-b-2 border-red-500 pb-1 font-medium">
          <span class="text-lg">福利中心</span>
        </div>
        <div class="text-gray-500">
          <span class="text-lg">福利商城</span>
        </div>
      </div>
    </div>

    <!-- 余额卡片 -->
    <div class="mx-4 mb-4">
      <div class="bg-gradient-to-r from-red-500 to-pink-500 rounded-lg p-4 text-white">
        <div class="flex justify-between items-center mb-3">
          <div>
            <p class="text-sm opacity-90">金币余额(币)</p>
            <p class="text-2xl font-bold">0</p>
          </div>
          <div>
            <p class="text-sm opacity-90">现金余额(元)</p>
            <p class="text-2xl font-bold">0</p>
          </div>
          <button class="bg-green-500 text-white px-3 py-1 rounded text-sm">去提现 ></button>
        </div>
      </div>
    </div>

    <!-- 福利项目 -->
    <div class="px-4 space-y-4 pb-20">
      <!-- 新人福利 -->
      <div class="bg-gradient-to-r from-yellow-400 to-orange-400 rounded-lg p-4">
        <div class="flex items-center justify-between">
          <div>
            <div class="flex items-center mb-1">
              <i class="fas fa-gift text-white mr-2"></i>
              <span class="text-white font-medium">新人7天 必得4.8元</span>
            </div>
            <p class="text-white text-sm opacity-90">已领0元，还可以领4.8元</p>
          </div>
          <i class="fas fa-gift text-white text-2xl"></i>
        </div>
      </div>

      <!-- 提现福利 -->
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="font-medium text-gray-800">提现0.3元到钱包</h3>
            <p class="text-red-500 text-sm font-medium">🧧 0.3元</p>
            <p class="text-gray-500 text-xs">天天提现 每日用户专享 春日可期！</p>
          </div>
          <button class="bg-red-500 text-white px-4 py-2 rounded text-sm">去提现</button>
        </div>
      </div>

      <!-- 新人看剧领现金 -->
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="font-medium text-gray-800">新人见面领现金1.2元</h3>
            <p class="text-red-500 text-sm font-medium">🧧 1.2元</p>
            <p class="text-gray-500 text-xs">点击领取现金红包</p>
          </div>
          <button class="bg-red-500 text-white px-4 py-2 rounded text-sm">领取</button>
        </div>
      </div>

      <!-- 提现1元 -->
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="font-medium text-gray-800">提现1元</h3>
            <p class="text-red-500 text-sm font-medium">🧧 1元</p>
            <p class="text-gray-500 text-xs">立即提现秒到账</p>
          </div>
          <button class="bg-red-500 text-white px-4 py-2 rounded text-sm">去提现</button>
        </div>
      </div>

      <!-- 新人看剧送现金 -->
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="font-medium text-gray-800">新人看剧送现金</h3>
            <p class="text-red-500 text-sm font-medium">🧧 1.1元</p>
            <p class="text-gray-500 text-xs">08/26前可完成，看剧10分钟领现金</p>
          </div>
          <button class="bg-red-500 text-white px-4 py-2 rounded text-sm">去看剧</button>
        </div>
      </div>

      <!-- 签到奖励 -->
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex items-center justify-between mb-3">
          <h3 class="font-medium text-gray-800">新人签到领金币</h3>
          <button class="bg-red-500 text-white px-4 py-2 rounded text-sm flex items-center">
            领取
            <i class="fas fa-gift ml-1"></i>
          </button>
        </div>
        <p class="text-gray-600 text-sm mb-3">08/20~08/26 每日签到领金币</p>
        <div class="flex justify-between items-center">
          <div class="text-center">
            <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-white text-xs"></i>
            </div>
            <p class="text-xs text-yellow-600 font-medium">今天</p>
            <p class="text-xs text-gray-500">19800</p>
          </div>
          <div class="text-center">
            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-gray-400 text-xs"></i>
            </div>
            <p class="text-xs text-gray-500">2天</p>
            <p class="text-xs text-gray-500">9900</p>
          </div>
          <div class="text-center">
            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-gray-400 text-xs"></i>
            </div>
            <p class="text-xs text-gray-500">3天</p>
            <p class="text-xs text-gray-500">5280</p>
          </div>
          <div class="text-center">
            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-gray-400 text-xs"></i>
            </div>
            <p class="text-xs text-gray-500">4天</p>
            <p class="text-xs text-gray-500">11550</p>
          </div>
          <div class="text-center">
            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-gray-400 text-xs"></i>
            </div>
            <p class="text-xs text-gray-500">5天</p>
            <p class="text-xs text-gray-500">6600</p>
          </div>
          <div class="text-center">
            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mb-1">
              <i class="fas fa-coins text-gray-400 text-xs"></i>
            </div>
            <p class="text-xs text-gray-500">6天</p>
            <p class="text-xs text-gray-500">5610</p>
          </div>
          <div class="text-center">
            <div
              class="w-8 h-8 bg-gradient-to-br from-red-400 to-pink-500 rounded-full flex items-center justify-center mb-1"
            >
              <i class="fas fa-gift text-white text-xs"></i>
            </div>
            <p class="text-xs text-red-500 font-medium">开宝箱</p>
            <p class="text-xs text-gray-500">26400</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped></style>
